<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no">
    <title>台风模拟</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=nuWah68S1WieW2AEwiT8T3Ro&s=1"></script>
    <!-- <script type="text/javascript" src="data/typhoon-data.js"></script> -->
    <script type="text/javascript" src="mapstyle/googlelite.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="../build/baidu-map-typhoonNew.js"></script>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = new BMap.Map("map", {
            minZoom: 5
        });
        map.centerAndZoom(new BMap.Point(123.932575, 20.165757), 6);
        map.enableScrollWheelZoom();
        map.setMapStyle({
            styleJson: styleJson
        });

        var result = {
            levelList: [{
                name: 'TD',
                level: '热带低压',
                power: '6~7级',
                color: '#02ff02'
            }, {
                name: 'TS',
                level: '热带风暴',
                power: '8~9级',
                color: '#0264ff'
            }, {
                name: 'STS',
                level: '强热带风暴',
                power: '10~11级',
                color: '#fffb05'
            }, {
                name: 'TY',
                level: '台风',
                power: '12~13级',
                color: '#ffac05'
            }, {
                name: 'STY',
                level: '强台风',
                power: '14~15级',
                color: '#f171f9'
            }, {
                name: 'SUPER TY',
                level: '超强台风',
                power: '>=16级',
                color: '#fe0202'
            }]
        }

        $(function () {
            $.getJSON('data/typhoon.json', function (data) {
                var dataSet = [];
                $.each(data, function (i, item) {
                    dataSet.push({
                        id: i,
                        lon: item.lon,
                        lat: item.lat,
                        pubTime: item.dt,
                        airPress: item.pres,
                        speed: item.ws,
                        radius6: item.rr06,
                        radius7: item.rr07,
                        radius8: item.rr08,
                        radius10: item.rr10,
                        radius12: item.rr12,
                        tlevel: item.tlev
                    });
                });
                var typhoon = new Typhoon(map, {
                    deg: 0,
                    splitData: [{
                        "name": "TD",
                        "level": "热带低压",
                        "power": "6~7级",
                        "color": "#02ff02"
                    }, {
                        "name": "TS",
                        "level": "热带风暴",
                        "power": "8~9级",
                        "color": "#0264ff"
                    }, {
                        "name": "STS",
                        "level": "强热带风暴",
                        "power": "10~11级",
                        "color": "#fffb05"
                    }, {
                        "name": "TY",
                        "level": "台风",
                        "power": "12~13级",
                        "color": "#ffac05"
                    }, {
                        "name": "STY",
                        "level": "强台风",
                        "power": "14~15级",
                        "color": "#f171f9"
                    }, {
                        "name": "SUPER TY",
                        "level": "超强台风",
                        "power": ">=16级",
                        "color": "#fe0202"
                    }],
                    data: dataSet
                });
            });
        });
    </script>
    <!-- <script type="text/javascript" src="../build/baidu-map-typhoon.js"></script> -->
</body>

</html>